<template>
    <div>
        <div class="d-flex">
            <div v-for="(tab,i) in tiemTabs" :key="i" :class="{'active':i==activeIndex}" class="timeTabBox"
                 @click="switchTimeTab(tab,i)">{{tab.title}}
            </div>
        </div>

        <Jmodal2 :visible="dateRangeModal" title="日期选择" left="-300" top="40" width="300" @cancel="dateRangeModal = false">
            <div>
                <a-range-picker @change="onDatePickChange" />
            </div>
        </Jmodal2>
    </div>

</template>

<script>
    import {getLastMonthRange, getLastWeekRange} from "../utils/js-utils";
    import Jmodal2 from "@/components/jmodal2.vue";

    export default {
        name: "switch-time-tab",
        components:{Jmodal2},
        props: {index: {default: 0}},
        data() {
            return {
                tiemTabs: [{title: '上周'}, {title: '上月'}, {title: '自定义'}],
                activeIndex: 0,
                range:[],

                dateRangeModal:false,
            }
        }, methods: {
            switchTimeTab(tab, i) {
                // if (this.activeIndex != i) {
                    this.dateRangeModal = false;
                    if (i === 0) {
                        this.range = getLastWeekRange();
                        this.$emit("jchange", this.range);
                    } else if (i === 1) {
                        this.range = getLastMonthRange();
                        this.$emit("jchange", this.range);
                    }else if(i === 2){
                        // console.log("show modal")
                        this.dateRangeModal = true;
                    }

                    this.activeIndex = i;

                    this.$forceUpdate();
                // }

            },
            onDatePickChange(v){
                this.dateRangeModal = false;
                this.range = [v[0].format("YYYY-MM-DD HH:mm:ss"),v[1].format("YYYY-MM-DD HH:mm:ss")];
                this.$emit("jchange", this.range);
            },
        }, mounted() {
            this.activeIndex = this.index;
        }
    }
</script>

<style scoped>

    >>> .ant-calendar-picker-input{
        background-color: rgba(82, 168, 208, 0.4);
        border: 1px solid #5BB0EF;
    }

    >>> >>> >>> .ant-calendar{
        background-color: rgba(82, 168, 208, 0.4);

    }
</style>
